<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top">
      <div style="width: 60px" @click="returnTap">取消</div>
      <span>设置备注和标签</span>
      <van-button type="info" style="height: 30px">完成</van-button>
    </div>
    <div class="title">备注名</div>
    <div class="input">
      <input type="text" placeholder="我的世界" />
    </div>
    <div class="title">电话号码</div>
    <div class="list">
      <van-icon class="listIcon" name="minus" />
      <span class="listadd">1234567898</span>
    </div>
    <div class="list">
      <van-icon name="add-o" class="listIcon1"  />
      <span class="listadd" style="color:#AEAEAE;">添加电话号码</span>
    </div>
        <div class="title">描述</div>
    <div class="input">
      <input type="text" placeholder="添加更多备注信息" />
    </div>
    <div class="addpic">
        <div class="addpic1">添加名片或相关图片</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.all {
  background: #eeeeee;
}
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eeeeee;
}
.title {
  padding: 0 0 0 3%;
  width: 97%;
  height: 40px;
  line-height: 40px;
  color: #8b8b8b;
}
.input {
  height: 50px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  background: #fff;
}
.input input {
  width: 100%;
  background: #fff;
  height: 50px;
  border: none;
  font-size: 18px;
}
.list {
  height: 50px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  font-size: 15px;
  background: #fff;
}
.listIcon {
  padding: 10px;
  border: 1px solid red;
  color: red;
  font-size: 10px;
  border-radius: 50%;
}
.listadd {
  margin-left: 20px;
}
.listIcon1{
  color: #4EC45C;
  font-size:36px;
}
.addpic{
    padding-top:30px;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    height: 200px;
   padding-bottom: 20px;
    background: #fff;
}
.addpic1{
  width: 100%;
  height: 200px;
  font-size: 18px;
  text-align: center;
  line-height: 200px;
     border:1px dashed #797979;
}
</style>